<template>
	
	<view class="nav-bar">
	      <text class="title">网易云音乐</text>
	      <view class="user-info">
	        <text class="username">云村村民66666</text>
	        <text>|</text>
	        <text class="logout">退出登录</text>
	      </view>
	    </view>
		<view class="search-box" @click="navigateToSearch">
		      <input 
		        class="search-input" 
		        placeholder="搜索歌曲/歌手" 
		        disabled
		        placeholder-style="color:#999"
		      />
		    </view>
			
	<view class="content">
		
		<!-- 榜单列表 -->
		<view class="chart-list">

		  <view v-for="(chart, index) in charts" :key="index" @tap="handleToList(chart.id)">
			<view class="chart-item">
			  <view class="chart-header">
				<image :src="chart.imgUrl" mode=""></image>
				<text>{{ chart.updateInfo }}</text>
			  </view>
			  
			  <view class="song-list">
				<view v-for="(song, i) in chart.songs" :key="i" class="song-item">
				  <text class="rank">{{ i + 1 }}.</text>
				  <text class="song-name">{{ song.name }}</text>
				  <text class="singer">- {{ song.singer }}</text>
				</view>
			  </view>
			</view>
		  </view>
		  
		</view>
		
	</view>
</template>

<script>
	import { topList } from '../../common/api.js'
	export default {
		data() {
			return {
				charts : []
				
			}
		},
		onLoad() {
			topList().then((res)=>{
				if(res.length){
					res.forEach((item)=>{
						var chart={title:item.name,id:item.id,updateInfo:item.updateFrequency,songs:[],imgUrl:item.coverImgUrl}
						item.tracks.forEach((song)=>{
							chart.songs.push({name:song.first,singer:song.second})
						})
						this.charts.push(chart)
					})
				}
			});
			setTimeout(()=>{console.log(this.charts)},1000)			
		},
		methods: {
             navigateToSearch() {
			      uni.navigateTo({
			        url: '/pages/search/search'
			      });
			    },
			handleToList(id){
				uni.navigateTo({url:'/pages/list/list?listid='+id});
				}
		}
	}
</script>

<style>
	.nav-bar {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 20rpx;
	}
	  .title {
	    font-size: 40rpx;
	    font-weight: bold;
	    color: #d43c33;
	  }
	
	  .user-info {
	    display: flex;
	    align-items: center;
	}
	    .username {
	      color: #666;
	      margin-right: 20rpx;
	    }
		.search-box {
		  flex: 1;
		  height: 72rpx;
		  background: #f5f5f5;
		  border-radius: 36rpx;
		  padding: 0 30rpx;
		  display: flex;
		  align-items: center;
		  position: relative;
		
		}
		
		  .search-input {
		    font-size: 28rpx;
		    color: #333;
		    width: 100%;
		  }
		
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.chart-list {margin:0 30rpx;width: 95%;}
	.chart-item {display: flex; margin-bottom: 35rpx;}
	.chart-header {width:212rpx; height:212rpx; margin-right:20rpx; border-radius: 15rpx; overflow: hidden; position: relative;}
	.chart-header image { width:100%; height:100%;}
	.chart-header text{position: absolute; font-size:22rpx; color:white; bottom: 15rpx; left:15rpx;}
	.song-list {flex:1; font-size:24rpx; line-height: 68rpx;}
	.song-list {}
</style>